new Vue({
    data: {
        user:{},
        imageUrl:'',
        userId: 1, // 假设这是我们要操作的用户ID
        form: {
            screen_name: '',
            description: '',
            email: '',
            phone: '',
            password: ''
        },

        showPassword: false
    },
    methods: {
        fetchUserById() {
            axios.get(`user/getUserById.do?userId=${this.userId}`).then(response => {
                this.user = response.data;
                this.form.screen_name = this.user.userName;
                this.form.description = this.user.userIntroduce;
                this.form.email = this.user.userEmail;
                this.form.phone = this.user.userPhone;
                this.form.password = this.user.userPassword;
                this.imageUrl = this.user.userPic;
                console.log(this.user);
            }).catch(error => {
                console.error("Error fetching user: ", error);
            });

        },
        submitForm() {
            axios({
                method: 'Post',
                url: `user/updateForm.do`,
                data: {
                    userId: this.userId,
                    userName: this.form.screen_name,
                    userIntroduce: this.form.description,
                    userEmail: this.form.email,
                    userPhone: this.form.phone,
                    userPassword: this.form.password

                }
            })
                .then(response => {
                    console.log('用户信息更新成功', response);
                    window.alert("更新成功")
                    alert("更新成功"); // 这里可以添加更新成功后的处理逻辑，例如提示用户、跳转到其他页面等
                })
                .catch(error => {
                    console.error('用户信息更新失败', error);
                    // 这里可以添加错误处理逻辑，例如显示错误消息等
                    alert("更新失败");
                });

        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            // 假设服务器返回的res.data.avatarUrl是新头像的URL
            this.updateUserAvatar(res.data.avatarUrl);
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            // return isJPG && isLt2M;
            return  isLt2M;
        },
        updateUserAvatar(avatarUrl) {
            // 更新用户的头像URL到数据库或其他存储位置
            // 例如通过axios发送请求
            axios.post('user/updateUserPic.do', { avatarUrl })
                .then(() => {
                    // 成功更新后可能需要刷新用户信息
                    this.$message.success('头像更新成功');
                    console.log('更新成功')
                })
                .catch(error => {
                    this.$message.error('头像更新失败');
                });
        },

    },
    mounted() {
        this.fetchUserById();

    }
}).$mount("#app");